<template>
  <div class="v-editor-model-tree-select g-jc-sb">
    <PropertyNodeLabel
      :row="row"
      :encrypted="encrypted"
    ></PropertyNodeLabel>

    <div
      v-if="selected && !row.readonly && !isModelDisabled && !tableElementDisabled"
      class="g-pd-r-4 img-btn"
    >
      <img
        src="statics/icons/app/iconmore.png"
        class="g-pointer"
        @click="handleClick"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { actionManager } from "@/action/ActionManager";
import { CreatePropertyModelTreeSelect } from "@/modules/model/actions/project/CreatePropertyModelTreeSelect";
import { PropertyRow } from "../../types";
import { Ref, toRaw, inject } from "vue";
import PropertyNodeLabel from "../custom/PropertyNodeLabel.vue";
import { ActionKey } from "@/action/ActionKey";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

/**
 * 模型单选-树选择弹窗
 */
const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
  tableElementDisabled?: boolean;
  encrypted?: boolean;
}>();

const handleClick = () => {
  const action = actionManager.getAction(ActionKey.CreatePropertyModelTreeSelect) as CreatePropertyModelTreeSelect;
  action?.run(toRaw(props.row));
};
</script>
<style lang="scss" scoped>
.v-editor-model-tree-select {
  height: 100%;
  overflow: hidden;
  .v-property-node-label {
    overflow: hidden;
    line-height: 24px;
  }
  > .img-btn {
    display: flex;
    align-items: center;
  }
}
</style>
